<template>
  <div class="contact-view">
    <div class="container">
      <h1>联系我们</h1>
      
      <div class="contact-content">
        <p>如果您有任何疑问、建议或合作意向，请通过以下方式与我们取得联系，或填写右侧的表单。</p>
        
        <div class="contact-info">
          <p><i class="fas fa-envelope"></i> Email: <a href="mailto:info@example.com">info@example.com</a></p>
          <p><i class="fas fa-phone"></i> 电话: (123) 456-7890</p>
          <p><i class="fas fa-map-marker-alt"></i> 地址: 互联网的某个角落</p>
        </div>
      </div>

      <div class="contact-form card">
        <form @submit.prevent="submitForm">
          <div class="form-group">
            <label for="name">姓名</label>
            <input type="text" id="name" v-model="form.name" required>
          </div>
          <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" id="email" v-model="form.email" required>
          </div>
          <div class="form-group">
            <label for="subject">主题</label>
            <input type="text" id="subject" v-model="form.subject">
          </div>
          <div class="form-group">
            <label for="message">留言</label>
            <textarea id="message" v-model="form.message" rows="6" required></textarea>
          </div>
          <button type="submit" class="submit-btn btn btn-primary">发送留言</button>
        </form>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: 'ContactView',
  data() {
    return {
      form: {
        name: '',
        email: '',
        subject: '',
        message: ''
      }
    };
  },
  methods: {
    submitForm() {
      // 在这里处理表单提交逻辑，例如发送到后端API或显示成功消息
      console.log('Form submitted:', this.form);
      alert('留言已发送！(实际发送功能待实现)');
      // 清空表单
      this.form.name = '';
      this.form.email = '';
      this.form.subject = '';
      this.form.message = '';
    }
  }
}
</script>

<style scoped>
.contact-view {
  padding: 60px 0;
}

.container {
    max-width: 1000px; /* Slightly wider container */
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 60px; /* Increased gap */
    align-items: flex-start;
}

h1 {
    width: 100%;
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 40px;
    font-size: 2.5em;
}

.contact-content {
    flex: 1;
    min-width: 300px;
}

.contact-content p {
    color: var(--text-light);
    line-height: 1.7; /* Increased line height */
    margin-bottom: 20px;
    font-size: 1.1em; /* Adjusted font size */
}

.contact-info p {
    color: var(--text-color);
    margin-bottom: 15px;
    font-size: 1.1em;
}

.contact-info i {
    margin-right: 10px;
    color: var(--primary-color);
}

.contact-info a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info a:hover {
    color: var(--primary-color);
}

.contact-form {
    flex: 1;
    min-width: 300px;
    /* background, border-radius, box-shadow handled by .card */
    /* background: var(--card-bg);
    border-radius: 10px;
    box-shadow: var(--shadow); */
    padding: 30px; /* Consistent padding */
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    color: var(--text-color);
    margin-bottom: 8px;
    font-weight: bold;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 12px; /* Consistent padding */
    border: 1px solid var(--border-color); /* Use variable */
    border-radius: 8px; /* Consistent border-radius */
    font-size: 1rem; /* Consistent font size */
    background: var(--bg-color-light); /* Use variable */
    color: var(--text-color);
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Add transition */
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2); /* Add focus shadow */
}

/* Use global .btn and .btn-primary styles */
/* .submit-btn {
    display: inline-block;
    background: var(--primary-color);
    color: white;
    padding: 12px 25px;
    border-radius: 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submit-btn:hover {
    background: var(--secondary-color);
} */

@media (max-width: 768px) {
    .contact-view {
      padding: 40px 0;
    }

    .container {
        flex-direction: column;
        gap: 30px; /* Adjusted gap */
    }

    h1 {
      font-size: 2em;
    }

    .contact-content,
    .contact-form {
        width: 100%;
        padding: 20px; /* Adjusted padding */
    }

    .contact-content p,
    .contact-info p {
      font-size: 1em; /* Adjusted font size */
    }

    .form-group label {
      font-size: 1em; /* Adjusted font size */
    }

    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group textarea {
      padding: 10px;
      font-size: 0.9em; /* Adjusted font size */
    }
}
</style> 